<template>
  <h3>个人中心</h3>
  <div id="section" class="flex">
    <div>
      <div class="bgfff apppadding" style="display: flex; flex-direction: column; align-items: center">
        <div style="align-self: flex-end">
          <span @click="admin.logOut" class="textbutton">退出登录</span>
          <span class="textbutton" v-if="but.has('public:account:reset_password')" @click="dResetPassword._show = true">
            {{ but.get("public:account:reset_password") }}
          </span>
        </div>
        <div style="
            width: 120px;
            height: 120px;
            overflow: hidden;
            border-radius: 50%;
            line-height: 120px;
          ">
          <img style="width: 120px; height: 120px" :src="userInfo?.headImg || defaultAvatar" alt="头像" />
        </div>
        <div style="padding: 20px">{{ userInfo?.name }}</div>
        <div class="cell" v-if="but.has('account:sign')">
          <div>签名密码：</div>
          <div>
            <span class="textbutton" @click="userSign.showCode = true">修改</span>
          </div>
        </div>
        <div class="cell" v-if="but.has('account:sign')">
          <div>签名：</div>
          <div>
            <span class="textbutton" @click="userSign.getSign()">获取</span>
            <span class="textbutton" @click="userSign.showSet = true">修改</span>
          </div>
        </div>
      </div>
    </div>
    <el-dialog v-model="dResetPassword._show" title="修改密码" width="30%">
      <bForm :instance="dResetPassword" cover="100%" :mini="true">
        <el-button style="margin-left: 22px" @click="() => dResetPassword.updateData()" type="primary">完成</el-button>
      </bForm>
    </el-dialog>
    <el-dialog v-model="userSign.showCode" title="修改签名密码" width="30%">
      <el-input v-model="userSign.code" type="password" placeholder="请输入签名密码"></el-input>
      <div class="blank"></div>
      <el-button style="margin-left: 22px" @click="() => userSign.setCode()" type="primary">完成</el-button>
    </el-dialog>
    <el-dialog v-model="userSign.showCheck" title="验证签名密码" width="30%">
      <el-input v-model="userSign.checkCoded" type="password" placeholder="请输入签名密码"></el-input>
      <div class="blank"></div>
      <el-button style="margin-left: 22px" @click="() => userSign.checkCode()" type="primary">完成</el-button>
    </el-dialog>
    <el-dialog v-model="userSign.showSign" title="我的签名" width="30%">
      <div style="width: 200px; height: 200px; overflow: hidden; border-radius: 50%; line-height: 200px;">
        <div v-if="!userSign.sign">暂无签名
          <span class="textbutton" @click="() => userSign.getSign()">刷新</span>
        </div>
        <img v-else style="width: 200px; height: 200px" :src="userSign.sign" alt="签名" />
      </div>
    </el-dialog>
    <el-dialog v-model="userSign.showSet" title="签名" width="30%">
      <div class="esignborder">
        <vueEsign ref="esign" :isCrop="true" :width="300" :height="200"></vueEsign>
      </div>
      <div class="blank"></div>
      <div>
        <el-button @click="handleGenerate" type="primary">生成</el-button>
        <el-button style="margin-left: 22px" @click="handleReset">重置</el-button>
      </div>
    </el-dialog>
    <groupList :instance="group"></groupList>
  </div>
</template>
<script setup lang="ts">
import { adminStore, pagebuttonStore } from "@b/store";
import bForm from "@/components/public/b_form.vue";
import vueEsign from "vue-esign";
import { computed, useTemplateRef } from "vue";
import groupList from "@/components/group/group_list.vue";
import { AccountGroupList, ResetPassword, UserSign } from "@b/index/account";
import { ElDialog, ElButton, ElMessage, ElInput } from "element-plus";
import defaultAvatar from "@/assets/OIP-C.jpg?url";

const admin = adminStore();
const dResetPassword = new ResetPassword();
const group = new AccountGroupList();
const userSign = new UserSign();
const refEsign = useTemplateRef('esign');
const userInfo = computed(() => admin.userInfo);
const but = pagebuttonStore().button;


const handleReset = () => {
  (refEsign.value as any).reset()
}
const handleGenerate = () => {
  (refEsign.value as any).generate().then((res: string) => {
    userSign.setSign(res).then(() => {
      userSign.sign = res
    })
  }).catch((err: any) => {
    if (err === "Warning: Not Signned!") {
      ElMessage.warning('签名为空')
    }
    ElMessage.error(err.message)
  })
}
</script>
<style scoped>
.flex {
  display: flex;
}

.flex> :first-child {
  width: 400px;
}

.flex> :last-child {
  width: 300px;
  height: 600px;
}

.cell {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 10px 0;
}

.esignborder {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
}
</style>
